<!--
  @Descripttion:用户中心-职位浏览记录
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <pageCom>
    <div class="content-page">
      <!-- 头部导航栏 -->
      <div class="content">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'userCenter' }"
              >用户中心</el-breadcrumb-item
            >
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content-title">职位浏览记录</div>
        <div class="list">
          <el-empty
            description="暂无浏览记录"
            v-if="dataList.length === 0"
          ></el-empty>
          <div
            class="item"
            :key="index"
            v-for="(item, index) in dataList"
            @click="openDetail(item)"
          >
            <div class="title">
              {{ item.jobName }}
              <span
                >{{ item.lowestSalary + "-" + item.highestSalary }}元/天</span
              >
            </div>
            <div class="row">
              <span class="local-icon" />
              <span class="city">{{ item.city }}</span>
              <span class="small-text">{{ item.workPeriod }}</span>
              <span class="line" v-if="item.practicePeriod" />
              <span class="small-text" v-if="item.practicePeriod"
                >{{ item.practicePeriod }}个月</span
              >
            </div>
            <div class="row2">
              {{ item.companyName }}
              <span class="line" v-if="item.industry"></span>
              {{ item.industry }}
            </div>
            <div class="date">
              浏览日期：{{ item.viewTime }}
              <span class="open">点击查看职位信息</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </pageCom>
</template>

<script>
import pageCom from "@/components/page/index.vue";
import { getJobViewRecord, isJob } from "../../request/api";
import { getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime } from "../../utils/utils";
export default {
  // 组件名称
  name: "userCenter",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { pageCom },
  // 组件状态值
  data() {
    return {
      dataList: [],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  // 组件方法
  methods: {
    openDetail(item) {
      isJob({ id: item.id }).then((res) => {
        if (res.code === 0 && res.data) {
          /**
           * 职位状态 0 发布 1 暂停发布 2 删除
           */
          if (Number(res.data) === 0) {
            this.linkTo(item.id);
          } else if (Number(res.data) === 1 || Number(res.data) === 2) {
            this.$message.warning("该职位已停止发布");
          }
        }
      });
    },
    init() {
      let params = {
        pageNo: 1,
        pageSize: 20,
        city: "",
        sortField: { field: "v.view_time", order: "desc" },
      };
      getJobViewRecord(params).then((res) => {
        if (res.data) {
          let list = res.data;
          list.forEach((v) => {
            try {
              v.city = JSON.parse(v.city)[1];
            } catch {
              () => {};
            }
            try {
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
              }
            } catch {
              () => {};
            }
            v.workPeriod && (v.workPeriod = getWorkPeriodName(v.workPeriod));
            v.viewTime && (v.viewTime = formatTime(new Date(v.viewTime)));
          });
          this.dataList = list;
          this.total = res.data.total;
        }
      });
    },

    linkTo(id) {
      localStorage.setItem("currentJobId", id);
      this.$router.push({
        path: `/jobDetail/${id}`,
      });
    },
    getList(e) {
      this.pageNo = e.page;
      this.init();
    },
    rangTypeChange(e) {
      console.log(e);
    },
    // 城市切换
    handleCityChange(data) {
      // this.city = data[1];
      this.init();
    },
    // 重置
    reset() {
      this.city = "";
      this.init();
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.content-page {
  position: relative;
  width: 100%;
  height: 100%;

  .bannber {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 25px;
  }

  .content {
    position: relative;
    width: 100%;
    margin: 0 auto;

    .content-title {
      font-size: 28px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 40px;
      margin-bottom: 15px;
      position: relative;
    }

    .search-condition {
      width: 100%;
      .tips-text {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 25px;
        margin-right: 12px;
      }

      .condition-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/images/search-icon.png") no-repeat center
          center / cover;
        vertical-align: middle;
        margin-right: 13px;
      }
    }
  }

  .list {
    position: relative;
    width: 100%;
    overflow: hidden;

    .item {
      position: relative;
      width: calc((100% - 50px) / 3);
      float: left;
      margin: 20px 25px 0px 0;
      border-radius: 9px;
      background: url("../../assets/images/user/deliver-bg.png") no-repeat top
        center / cover;
      padding: 30px 18px 20px;
      border: 1px solid #d4d6da;
      cursor: pointer;
      overflow: hidden;
      &:nth-child(3n) {
        margin: 20px 0px 0px 0;
      }

      .title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 20px;
        position: relative;
        padding-right: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        > span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 20px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .row {
        line-height: 30px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        .local-icon {
          display: inline-block;
          width: 20px;
          height: 24px;
          background: url("../../assets/images/user/local.png") no-repeat center
            center / cover;
          margin-right: 12px;
        }

        .city {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 20px;
          margin-right: 15px;
        }

        .small-text {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;
        }

        .line {
          display: inline-block;
          width: 1px;
          height: 10px;
          background: #9597a0;
          margin: 0 10px;
        }
      }

      .row2 {
        width: 100%;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 20px;
        margin-bottom: 15px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .line {
          display: inline-block;
          width: 1px;
          height: 10px;
          background: #9597a0;
          margin: 0 20px;
        }
      }

      .date {
        line-height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #c4c4c4;

        .open {
          float: right;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2f8efe;
          line-height: 20px;
        }
      }
      &:hover {
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        .title {
          color: #2f8efe;
        }
      }
    }
  }
}


@media screen and (max-width: 480px) {
  .content-page{
     .content {
      position: relative;
      width: 100%;
      margin: 0 auto;
      .nav-com{
        display: none;
      }
      .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .item{
          width: 100%;
          float: left;
          margin: 0;
          margin-top: 10px;
          border-radius: 9px;
          background: url("../../assets/images/user/deliver-bg.png") no-repeat top
            center / cover;
          padding: 0.22rem 0.12rem 0.12rem;
          border: 1px solid #d4d6da;
          cursor: pointer;
          overflow: hidden;
          .title {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #37383d;
            line-height: 28px;
            margin-bottom: 9px;
            position: relative;
            padding-right: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            > span {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0; 
              line-height: 20px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .row{
            margin-bottom: 10px;
            
            .local-icon{
              width: 13px;
              height: 16px;
              margin-right: 7px;
            }
            .city{
              margin-right: 16px;
              font-size: 13px;
            }
            .small-text{
              line-height: 0.18rem;
              font-size: 0.13rem;
            }
          }
          .row2{
            margin-bottom: 12px;
          }
          .date{
            font-size: 13px;
            .open{
              font-size: 13px;
            }
          }
        }

      }
      .content-title {
        display: none;
        // font-size: 28px;
        // font-family: PingFangSC-Semibold, PingFang SC;
        // font-weight: 600;
        // color: #37383d;
        // line-height: 40px;
        // margin-bottom: 15px;
        // position: relative;
      }
    }
  }
}
.bottom-page {
  margin-top: 20px;
  text-align: center;
}
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}

#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}
/deep/ .el-button--text {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3d6cb0;
  line-height: 21px;
}
</style>
